<template>
  <!-- 地图容器 -->
  <div id="baiduMap" class="baidu-map"></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 动态加载百度地图API
  const loadBaiduMap = () => {
    return new Promise((resolve, reject) => {
      // 若已加载则直接 resolve
      if (window.BMap) {
        resolve(window.BMap);
        return;
      }

      // 替换为你申请的AK
      const ak = 'Vi1FpjkTs8ZVZrjvKqMbyIqMUhyHbEfu'; 
      const script = document.createElement('script');
      script.type = 'text/javascript';
      // 带callback确保加载完成后执行初始化
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=initBaiduMap`;
      script.onerror = reject; // 加载失败回调
      document.head.appendChild(script);

      // 全局回调函数，通知API加载完成
      window.initBaiduMap = () => {
        resolve(window.BMap);
      };
    });
  };

  // 加载成功后初始化地图
  loadBaiduMap().then(BMap => {
    const map = new BMap.Map("baiduMap"); // 绑定地图容器
    const centerPoint = new BMap.Point(116.404, 39.915); // 北京坐标（可自定义中心）
    map.centerAndZoom(centerPoint, 11); // 缩放级别（1-19，越大越详细）
    map.enableScrollWheelZoom(true); // 允许滚轮缩放
  }).catch(err => {
    // console.error('百度地图加载失败：', err);
  });
});
</script>

<style scoped>
/* 地图容器样式，需设置宽高 */
.baidu-map {
  width: 100%;
  height: 100%; /* 可根据需求调整高度 */
}
</style>    